<template>
  <!-- <el-dialog
    v-el-drag-dialog
    title="报修单详情"
    :visible.sync="visible"
    width="1024px"
  > -->
  <div>
    <el-drawer
      v-if="visible"
      class="repairDetail"
      :visible.sync="visible"
      title="报修单详情"
      :append-to-body="true"
      size="1200px"
    >
      <div class="container">
        <div class="detail">
          <div class="item">
            <div class="title">
              <span class="title-icon" />
              <span class="title-text">报修明细</span>
            </div>
            <div class="client-box">
              <table class="content-item">
                <tr>
                  <td>报修单号</td>
                  <td>客户编号</td>
                  <td>客户名称</td>
                  <td>联系电话</td>
                  <td>所属机构</td>
                </tr>
                <tr>
                  <td>{{ detailData.repairCode }}</td>
                  <td>{{ detailData.csmCode }}</td>
                  <td>{{ detailData.csmName }}</td>
                  <td>{{ detailData.contactPhone }}</td>
                  <td>{{ detailData.orgName }}</td>
                </tr>
                <tr>
                  <td class="td-bolder">联系地址</td>
                  <td colspan="4">{{ detailData.contactAddress }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span class="title-icon" />
              <span class="title-text">报修信息</span>
            </div>
            <div class="client-box">
              <table class="content-item content-repairContent">
                <tr>
                  <td class="td-bolder">报修内容</td>
                  <td colspan="4">{{ detailData.repairContent }}</td>
                </tr>
                <tr>
                  <td class="td-bolder">备注</td>
                  <td colspan="4">{{ detailData.remark }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div v-for="(item,index) in detailData.userRepairList" :key="index" class="item">
            <div class="title">
              <span class="title-icon" />
              <span class="title-text">{{ toChinesNum(index+1) }}次处理结果{{ item.marker2 && '（'+item.marker2+'）' }}</span>
            </div>
            <div class="client-box">
              <table class="content-item">
                <tr>
                  <td>责任机构</td>
                  <td>处理人</td>
                  <td>处理时间</td>
                </tr>
                <tr>
                  <td>{{ item.orgName }}</td>
                  <td>{{ item.userName }}</td>
                  <td>{{ item.signDt && parseTime(item.signDt, '{y}-{m}-{d} {h}:{i}:{s}') }}</td>
                </tr>
                <tr>
                  <td class="td-bolder">维修员反馈</td>
                  <td colspan="4">{{ item.marker1 }}</td>
                </tr>
                <tr>
                  <td class="td-bolder">维修照片</td>
                  <td colspan="4" class="td-image">
                    <el-image v-for="(ele,idx) in item.imageList" :key="idx" class="image" :src="baseSrc+ele" :preview-src-list="[baseSrc+ele]" />
                  </td>
                </tr>
              </table>
              <div class="cmSignPict">
                <div class="item-title">客户签字</div>
                <el-image v-if="item.signUrl" class="image" :src="baseSrc+item.signUrl" :preview-src-list="[baseSrc+item.signUrl]" />
              </div>
            </div>
          </div>
        </div>
        <div class="circul">
          <h3>流转信息</h3>
          <el-timeline>
            <el-timeline-item v-for="(item, index) in data" :key="index" :timestamp="`${parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}')} ${item.operator}`" placement="top">
              <el-card>
                <h4>{{ item.traceDesc }}</h4>
                <h4 v-if="item.marker">{{ `${item.marker ? item.marker : '备注'}` }}：{{ item.other }}</h4>
                <p>{{ `发生部门&nbsp;——&nbsp;${item.orgName ? item.orgName : '系统'}` }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- 底部 -->
      <div class="demo-drawer__footer" style="padding: 0 10px 10px 0; text-align: right;">
        <div class="btn-group">
          <div class="btns">
            <el-button v-if="detailData.rstatus === 1" v-show="$btnPermission([30603, 3])" type="primary" @click="visible=false;audit(detailData)">审核</el-button>
            <el-button v-if="detailData.rstatus === 2" v-show="$btnPermission([30603, 4])" type="primary" @click="visible=false;openPressOrder(detailData)">催单</el-button>
            <el-button v-if="detailData.rstatus === 2 || detailData.rstatus === 6" v-show="$btnPermission([30603, 5])" type="primary" @click="visible=false;openTransferOrder(detailData)">转派</el-button>
            <el-button v-if="detailData.rstatus === 3" v-show="$btnPermission([30603, 6])" type="primary" @click="visible=false;dealConfirm(detailData)">处理确认</el-button>
            <el-button v-if="detailData.rstatus === 3" v-show="$btnPermission([30603, 7])" type="primary" @click="visible=false;dealReject(detailData)">驳回</el-button>
            <el-button v-if="detailData.rstatus === 10" v-show="$btnPermission([30603, 8])" type="primary" @click="visible=false;openReturnVisit(detailData)">回访</el-button>
            <el-button v-if="detailData.rstatus === 1 || detailData.rstatus === 2 || detailData.rstatus === 6" v-show="$btnPermission([30603, 9])" type="primary" @click="visible=false;openBackOrder(detailData)">退单/确认</el-button>
            <el-button v-show="$btnPermission([30603, 10])" type="primary" @click="visible=false;openRemark(detailData)">备注</el-button>
          </div>
          <el-button @click="visible = false"> 关闭 </el-button>
        </div>
      </div>
    </el-drawer>
    <deal-confirm ref="dealConfirm" />
    <transfer-order ref="transferOrder" />
    <press-order ref="pressOrder" />
    <remark-order ref="remarkOrder" />
    <back-order ref="backOrder" />
    <return-visit ref="returnVisit" />
    <rejectReason ref="rejectReason" />
  </div>
  <!-- </el-dialog> -->
</template>

<script>
  import { queryOrderFlowInfoCommon, queryRepairOrderDetail, repairAudit } from '@/api'
  import { parseTime, toChinesNum } from '@/utils/index'
  import moment from 'dayjs'
  export default {
    name: 'detail',
    components: {
      dealConfirm: () => import('./DealConfirm.vue'),
      transferOrder: () => import('./TransferOrder.vue'),
      pressOrder: () => import('./pressRepair.vue'),
      remarkOrder: () => import('./Remark.vue'),
      backOrder: () => import('./BackOrder.vue'),
      returnVisit: () => import('./ReturnVisit.vue'),
      rejectReason: () => import('./rejectReason.vue')
    },
    data() {
      return {
        moment,
        parseTime,
        visible: false,
        detailData: {},
        data: [],
        baseSrc: process.env.VUE_APP_BASE_IMGURL
      }
    },
    methods: {
      toChinesNum,
      async open(temp) {
        await this.getDetail(temp)
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getDetail(temp) {
        const res = await queryRepairOrderDetail({
          repairCode: temp.repairCode
        })
        this.detailData = res.data
        this.detailData.userRepairList = this.detailData.userRepairList.map((item) => ({
          ...item,
          imageList: item.imageUrl && item.imageUrl.split(';')
        }))
        this.getCirculData(this.detailData)
      },
      format(detail) {
        let str = ''
        if (!detail.appointmentStartTime && !detail.appointmentEndTime) {
          str = `${moment(detail.appointmentStartTime).format('YYYY-MM-DD HH:mm') || '截止'}${moment(detail.appointmentEndTime).format('YYYY-MM-DD HH:mm') || '之后'}`
        }
        return str
      },
      async getCirculData(data) {
        const res = await queryOrderFlowInfoCommon({
          billCode: data.repairCode || '',
          billType: 2 // 报修单
        })
        this.data = res.data
      },
      // 点击催单
      async openPressOrder(row) {
        await this.$refs.pressOrder.open({
          billCode: row.repairCode,
          billType: 3,
          text: '处理'
        })
      },
      // 点击处理确认
      async dealConfirm(row) {
        await this.$refs.dealConfirm.open(row)
      },
      // 点击回访
      async openReturnVisit(row) {
        await this.$refs.returnVisit.open(row)
      },
      // 点击退单
      async openBackOrder(row) {
        await this.$refs.backOrder.open(row)
      },
      // 点击转派
      async openTransferOrder(row) {
        await this.$refs.transferOrder.open(row)
      },
      // 点击备注
      async openRemark(row) {
        await this.$refs.remarkOrder.open(row)
      },
      async audit(row) {
        const params = {
          repairCode: row.repairCode
        }
        const res = await repairAudit(params)
        if (res && res.data) this.$message.success('操作成功')
      },
      async dealReject(row) {
        await this.$refs.rejectReason.open(row)
      }
    }
  }
</script>

<style lang="scss" scoped>
.repairDetail {
  /deep/.el-drawer {
    width: 80% !important;
  }
}
/deep/.el-drawer__header {
  padding: 15px 20px;
  margin-bottom: 0;
}
.container {
  display: flex;
  height: calc(100vh - 120px);
  padding: 0 20px;
  overflow-y: auto;
  .detail {
    flex: 1;
    padding-right: 20px;
  }
  .circul {
    width: 400px;
    height: 100%;
    padding-left: 20px;
    overflow-y: auto;
    border-left: 1px solid #dcdfe6;
  }
}
.item {
  margin-bottom: 28px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
    .content {
      margin-bottom: 28px;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }

  .client-box {
    margin-top: 20px;
    font-size: 14px;
    .content-item {
      width: 100%;
      border-top: 1px solid #ebeef5;
      border-left: 1px solid #ebeef5;
      border-spacing: 0;
      td {
        padding: 12px 10px;
        color: #606266;
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
      }
      tr:nth-child(1) {
        font-weight: 600;
        td {
          min-width: 80px;
        }
      }
      .td-bolder {
        font-weight: 600;
      }
      .td-image {
        .image {
          width: 120px;
          height: 150px;
          margin: 0 10px 10px 0;
        }
      }
    }
    .content-repairContent {
      tr {
        display: flex;
        font-weight: 500 !important;
        td {
          display: block;
          flex: 1;
        }
        td:nth-child(1) {
          max-width: 100px !important;
          min-width: 80px;
        }
      }
    }
    .cmSignPict {
      display: flex;
      margin-top: 20px;
      .image {
        width: 120px;
        height: 150px;
        padding: 10px 0;
        margin: 0 15px;
      }
    }
  }
}
.demo-drawer__footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  background: white;
  border: 2px solid #DCDFE6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 21%;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
</style>
